<template>
  <div class="baoxiaoall">
    <top></top>
    <div style="background: #fff;">
      <div style="padding: 20px;">
        <div style="padding:20px; width: 100%; box-shadow: 0 0px 10px #e2e2e2; margin-bottom: 30px;">
          <div class="flexb">
            <div style="font-weight: bold; font-size: 20px;">销量构成</div>
            <div class="flex">
              <el-select v-model="bingxingall.sum_type" style="margin-right: 20px;" placeholder="发展订单" @change="getbingxing()">
                <el-option label="发展订单" value="orders_amount"></el-option>
                <el-option label="发货订单" value="deliver_amount"></el-option>
              </el-select>
              <el-select v-model="bingxingall.product_id" style="margin-right: 20px;" placeholder="请选择产品" filterable clearable  @change="getbingxing()">
                <el-option :label="item.name" :value="item.id" v-for="item in chanpinlist" :key="item.id"></el-option>
              </el-select>
              <el-select v-model="bingxingall.time" style="margin-right: 20px;" placeholder="请选择日期"  @change="getbingxing()">
                <el-option label="最近一周" value="1"></el-option>
                <el-option label="最近一月" value="2"></el-option>
              </el-select>
            </div>
          </div>

          <div id="main" style="width: 100%; height: 500px;"></div>

        </div>

        <div style="padding:20px; width: 100%; box-shadow: 0 0px 10px #e2e2e2; margin-bottom: 30px;">
          <div class="flexb">
            <div style="font-weight: bold; font-size: 20px;">销量趋势</div>
            <div class="flex">
              <el-select v-model="zhexianall.sum_type" style="margin-right: 20px;" placeholder="发展订单" @change="getzhexian()">
                <el-option label="发展订单" value="orders_amount"></el-option>
                <el-option label="发货订单" value="deliver_amount"></el-option>
              </el-select>
              <el-select v-model="zhexianall.channel_id" style="margin-right: 20px;" placeholder="请选择渠道" filterable clearable  @change="getzhexian()">
                <el-option :label="item.channel_name" :value="item.id" v-for="item in qudaolist" :key="item.id"></el-option>
              </el-select>
              <el-select v-model="zhexianall.product_id" style="margin-right: 20px;" placeholder="请选择产品" filterable clearable  @change="getzhexian()">
                <el-option :label="item.name" :value="item.id" v-for="item in chanpinlist" :key="item.id"></el-option>
              </el-select>
              <el-select v-model="zhexianall.time" style="margin-right: 20px;" placeholder="请选择日期"  @change="getzhexian()">
                <el-option label="最近一周" value="1"></el-option>
                <el-option label="最近一月" value="2"></el-option>
              </el-select>
            </div>
          </div>

          <div id="main2" style="width: 100%; height: 500px;"></div>

        </div>

        <div style="padding:20px; width: 100%; box-shadow: 0 0px 10px #e2e2e2; margin-bottom: 30px;">
          <div class="flexb">
            <div style="font-weight: bold; font-size: 20px;">归属地产品销量</div>
            <div class="flex">
              <el-select v-model="zhuxingall.operator" style="margin-right: 20px;" placeholder="请选择运营商" @change="getzhuxing()">
                <!-- <el-option label="中国移动" value="10086"></el-option>
                <el-option label="中国联通" value="10010"></el-option>
                <el-option label="中国电信" value="10000"></el-option> -->
				<el-option label="中国广电" value="10099"></el-option>

              </el-select>
              <el-select v-model="zhuxingall.time" style="margin-right: 20px;" placeholder="请选择日期"  @change="getzhuxing()">
                <el-option label="最近一周" value="1"></el-option>
                <el-option label="最近一月" value="2"></el-option>
              </el-select>
            </div>
          </div>

          <div id="main3" style="width: 100%; height: 500px;"></div>

        </div>


      </div>

    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  import axios from "axios";
  import top from "./components/top.vue";
  export default {
    components: {
      top
    },
    name: "apilist",
    data() {
      return {
        bingxingall:{
          start:"",//		是	string	时间
          end:"",//		是	string	时间
          product_id:"",//		是	string	产品id
          sum_type:"orders_amount",//	orders_amount	是	string	orders_amount订单数
          time:"1",
        },
        zhexianall:{
          start:"",//		是	string	时间
          end:"",//		是	string	时间
          product_id:"",//		是	string	产品id
          sum_type:"orders_amount",//	orders_amount	是	string	orders_amount订单数
          time:"1",
          channel_id:""
        },
        zhuxingall:{
          start:"",//		是	string	时间
          end:"",//		是	string	时间
          operator:"",//		是	string	产品id
          time:"1",
        },
        bingxing:"",
        zhuxing:"",
        zhexian:"",
        qudaolist:[],
        chanpinlist:[],
        color:['#ee2746','#2c9678','#1177b0','#f8df72','#80766e','#add5a2']
      }
    },
    created() {
      this.getqudaolist()

      //获取所有产品
      // if(!localStorage.getItem('allproducts')){
      //   axios.get("/api/gth/order-pages?status=100&_page_size=2000")
      //   	.then(function(response) {
      //   		if (response.data.msg.code == 0) {
      //           localStorage.setItem('allproducts',response.data.data.data)
      //   		}
      //   	})
      // }
      axios.get("/api/gth/order-pages?status=100&_page_size=2000")
      	.then(function(response) {
      		if (response.data.msg.code == 0) {

              localStorage.setItem('allproducts',JSON.stringify(response.data.data.data))
      		}
      	})

    },
    mounted() {
      this.getzhexian()
      this.getbingxing()
      this.getzhuxing()
    },
    methods: {
      bingxingtu: function() {
        var chartDom = document.getElementById('main');
        var myChart = this.$echarts.init(chartDom);
        var option;

        let n = []
        let zong = 0
        this.bingxing.forEach(item=>{
          zong = item.orders_amount + zong
        })
        if(zong == 0){
          zong = 1
        }
        this.bingxing.forEach(item=>{
          if(item.orders_amount){
            let name = item.channel_name + '  ' +(item.orders_amount / zong * 100).toFixed(2)+'%'
            n.push({name:name,value:item.orders_amount})
          }

        })
        option = {
          color:this.color,
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} ({d}%)'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [{
            name: '销量构成',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: n
          }]
        };

        option && myChart.setOption(option);
      },
      zhexiantu: function() {
        var chartDom = document.getElementById('main2');
        var myChart = this.$echarts.init(chartDom);
        var option;

        let d = []
        let n = []
        this.zhexian.forEach(item=>{
          d.push(item.date)
          n.push(item.amount)
        })
        option = {
          color:this.color,
          grid: {
            left: '1%',
            right: '1%',
            bottom: '1%',
            top: '5%',
            containLabel: true
          },
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            },
          xAxis: {
            type: 'category',
            data: d
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: n,
              type: 'line',
              smooth: true
            }
          ]
        };

        option && myChart.setOption(option);
      },
      zhuxingtu: function() {
        var chartDom = document.getElementById('main3');
        var myChart = this.$echarts.init(chartDom);
        var option;

        let shao = []
        let duo = []
        let y = []
        this.zhuxing.forEach(item=>{
          y.push(item.operator)
          shao.push(item.deliver_amount)
          duo.push(item.orders_amount)
        })
        option = {
          color:this.color,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // Use axis to trigger tooltip
              type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            }
          },
          grid: {
            left: '1%',
            right: '1%',
            bottom: '1%',
            top: '5%',
            containLabel: true
          },

          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: y
          },
          series: [
            {
              name: '订单数',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: duo
            },
            {
              name: '发货数',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: shao
            }
          ]
        };

        option && myChart.setOption(option);
      },
      logshow: function() {

      },
      godetail: function(id) {
        this.$router.push({
          path: '/apidetail',
          query: {
            'id': id
          }
        })
      },
      //翻页
      fanye: function(page) {
        this.loading = true
        this.page = page
        this.getlist()
      },
      //获取列表
      getzhexian: function() {
        if(this.zhexianall.time == 1){
          this.zhexianall.start = moment().subtract(7, 'days').format('YYYY-MM-DD')
          this.zhexianall.end = moment().format('YYYY-MM-DD')
        }
        if(this.zhexianall.time == 2){
          this.zhexianall.start = moment().subtract(1, 'months').format('YYYY-MM-DD')
          this.zhexianall.end = moment().format('YYYY-MM-DD')
        }
        axios.get('/api/form/data/trend',{params:this.zhexianall})
        // axios.get('/api/form/data/trend')
          .then(response => {
            if (response.data.msg.code == 0) {
              this.zhexian = response.data.data

              this.zhexiantu()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      getzhuxing: function() {
        if(this.zhuxingall.time == 1){
          this.zhuxingall.start = moment().subtract(7, 'days').format('YYYY-MM-DD')
          this.zhuxingall.end = moment().format('YYYY-MM-DD')
        }
        if(this.zhuxingall.time == 2){
          this.zhuxingall.start = moment().subtract(1, 'months').format('YYYY-MM-DD')
          this.zhuxingall.end = moment().format('YYYY-MM-DD')
        }
        axios.get('/api/form/data/product',{params:this.zhuxingall})
        // axios.get('/api/form/data/product')
          .then(response => {
            if (response.data.msg.code == 0) {
              this.zhuxing = response.data.data

              this.zhuxingtu()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      getbingxing: function() {
        if(this.bingxingall.time == 1){
          this.bingxingall.start = moment().subtract(7, 'days').format('YYYY-MM-DD')
          this.bingxingall.end = moment().format('YYYY-MM-DD')
        }
        if(this.bingxingall.time == 2){
          this.bingxingall.start = moment().subtract(1, 'months').format('YYYY-MM-DD')
          this.bingxingall.end = moment().format('YYYY-MM-DD')
        }
        axios.get('/api/form/data/all',{params:this.bingxingall})
        // axios.get('/api/form/data/all')
          .then(response => {
            if (response.data.msg.code == 0) {
              this.bingxing = response.data.data

              this.bingxingtu()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //获取列表
      getqudaolist: function() {
        this.loading = true
        axios.get('/api/form/channels?page=1&page_size=500')
          .then(response => {
            if (response.data.msg.code == 0) {
              this.qudaolist = response.data.data.data
              this.qudaolist.push({
                channel_name: "社会渠道部",
                id: 0
              })
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
        axios.get('/api/gth/products/list?page=1&page_size=500')
          .then(response => {
            if (response.data.msg.code == 0) {
              this.chanpinlist = response.data.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },

    }
  }
</script>

<style scoped lang="scss">
  .baoxiaoall {
    background: #f2f2f2;
    min-height: 100vh;
    *{ box-sizing: border-box;}
    .flex {
      display: flex;
      flex-wrap: wrap;
    }

    .flexb {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .flexc {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    .flexbc {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }

    .flexcc {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
  }
</style>
